<!doctype html>
<title>Monster Smash 1</title>

<canvas width="128" height="128"></canvas>

<script>

//Create the monster object

var monster =
{
  //The size of each frame on the tile sheet
  //and the tile sheet's number of columns
  IMAGE: "monsterTileSheet.png",
  SIZE: 128,
  COLUMNS: 3,
  
  //The numbers of the animation frames and the starting frame
  numberOfFrames: 5,
  currentFrame: 0,
  
  //Properties of the animation frames's x and
  //y positions on the tile sheet.
  //They're 0 when this object first loads
  sourceX: 0,
  sourceY: 0,
  
  //A property to control the loop  
  forward: true,
  
  //States
  HIDING: 0,
  JUMPING: 1,
  HIT: 2,
  state: this.HIDING,
  
  //Properties needed to help reset the animation
  timeToReset: 9,
  resetCounter: 0,
  
  //A property to store the random time
  waitTime: undefined,
  
  //A method to find a random animation time
  findWaitTime: function()
  {
    this.waitTime = Math.ceil(Math.random() * 60);  
  },
  
  //The monster's updateAnimation method
  updateAnimation: function()
  {  
    this.sourceX 
      = Math.floor(this.currentFrame % this.COLUMNS) * this.SIZE;
    this.sourceY 
      = Math.floor(this.currentFrame / this.COLUMNS) * this.SIZE;
         
    //Figure out the monster's state
    if(this.state !== this.HIT)
    {
      if(this.waitTime > 0  || this.waitTime === undefined)
      {
        this.state = this.HIDING;
      }
      else
      {
        this.state = this.JUMPING;
      }
    }
    
    //Change the behaviour of the animation based on the state
    switch(this.state)
    {
      case this.HIDING:
        this.currentFrame = 0;
        this.waitTime--;
        break;
        
      case this.JUMPING:
        //If the last frame has been reached, set forward to false
    	  if(this.currentFrame === this.numberOfFrames)
        {
          this.forward = false;
        }

        //If the first frame has been reached, set forward to true
        if(this.currentFrame === 0 && this.forward === false)
        {
          //Set forward to true, find a new waitTime,
          //set the state to HIDING and break the switch statement
          this.forward = true;
          this.findWaitTime();
          this.state = this.HIDING;
          break;
        }

        //Add 1 to currentFrame if forward is true, subtract 1 if it's false
    	  if(this.forward)
      	{
      	  this.currentFrame++;
      	}
      	else
      	{
      	  this.currentFrame--;
      	}
      	break;
        
      case this.HIT:
		    //Set the current frame to the last one on the tilesheet
		    //to display the explosion image
        this.currentFrame = 6;
        
        //Update the resetCounter by 1
		    this.resetCounter++;
		    
		    //Reset the animation if the resetCounter equals the timeToReset
		    if(this.resetCounter === this.timeToReset)
		    {
		      this.state = this.HIDING;
          this.forward = true;
          this.currentFrame = 0;
          this.resetCounter = 0;
          this.findWaitTime();
		    }
        break;
    }
  }
};

//Set up the canvas and drawing surface
var canvas = document.querySelector("canvas");
var drawingSurface = canvas.getContext("2d");

//Add a mousedown event listener to the canvas
canvas.addEventListener("mousedown", mousedownHandler, false);

//Load the animation tile sheet
var image = new Image();
image.addEventListener("load", loadHandler, false);
image.src = "../images/" + monster.IMAGE;

function loadHandler()
{ 
  //Find a random wait time
  monster.findWaitTime();
  
  //Start the animation
  updateAnimation();
}

function updateAnimation()
{ 
  //Set a timer to call updateAnimation every 120 milliseconds
  setTimeout(updateAnimation, 120);
  
  //Update the monster's animation frames
  monster.updateAnimation();
  
  //Render the animation
  render();
}

function mousedownHandler(event)
{
  if(monster.state === monster.JUMPING)
  {
    monster.state = monster.HIT;
  }
}

function render()
{
  //Clear the canvas of any previous frames
  drawingSurface.clearRect(0, 0, canvas.width, canvas.height);
  
  //Draw the monster's current animation frame  
  drawingSurface.drawImage
  (
    image, 
    monster.sourceX, monster.sourceY, monster.SIZE, monster.SIZE, 
    0, 0, monster.SIZE, monster.SIZE
  );
}

</script>

